


import React, { createElement, useState } from 'react'
import { Comment, Tooltip, Avatar } from 'antd';
import moment from 'moment';
import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
import {httpUpdateVideoCommentLikes, httpUpdateVideoCommentDislikes } from "../../apis";


export default function VideoComment({videoCommentId,content,likes,dislikes,userId,name,url,time}) {

    const [slikes, setLikes] = useState(likes);
    const [sdislikes, setDislikes] = useState(dislikes);
    const [action, setAction] = useState(null);
    const like = async () => {
      if(action==="liked")return ;
      setLikes(likes+1);
      let data = {};
      data.likes = slikes + 1;
      data.videoCommentId = videoCommentId;
      let res = await httpUpdateVideoCommentLikes(data);
      if(action) {
        setDislikes(sdislikes-1);
        data.dislikes = sdislikes - 1;
        await httpUpdateVideoCommentDislikes(data);
      }
      setAction('liked');
    };
  
    const dislike = async () => {
      if(action==="disliked")return ;
      setDislikes(dislikes+1);
      let data = {};
      data.dislikes = sdislikes + 1;
      data.videoCommentId = videoCommentId;
      await httpUpdateVideoCommentDislikes(data);
      if(action) {
        setLikes(slikes-1);
        data.likes = slikes - 1;
        await httpUpdateVideoCommentLikes(data);  
      }
      setAction('disliked');
    };
    const actions = [
      <Tooltip key="comment-basic-like" title="Like">
        <span onClick={like}>
          {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
          <span className="comment-action">{slikes}</span>
        </span>
      </Tooltip>,
      <Tooltip key="comment-basic-dislike" title="Dislike">
        <span onClick={dislike}>
          {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
          <span className="comment-action">{sdislikes}</span>
        </span>
      </Tooltip>,
      <span key="comment-basic-reply-to">Reply to</span>,
    ];

    return (
        <div>
            <Comment
            actions={actions}
            author={<a>{name}</a>}
            avatar={<Avatar src={url} alt="头像" />}
            content={
                <p>
                    {content}
                </p>
            }
            datetime={
                <Tooltip title={moment(time).format('YYYY-MM-DD HH:mm:ss')}>
                <span>{moment(time).fromNow()}</span>
                </Tooltip>
            }
            />
        </div>
    )
}
